<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件计算属性，watch属性，方法</title>
</head>
<body>
<div id="app">
    <input type="button" @click="changeMessage()" value="屠龙宝刀，点击就送" />
    <h1>{{ message }}</h1>
    <h1>{{ message1 }}</h1>
    <h1>{{ message2 }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message : '宝刀在此',
            message2: ''
        },
        computed: {
            message1: function() {
                return this.message + '!!!';
            }
        },
        watch: {
            message: function(val) {
                this.message2 = val + this.message1;
            }            
        },
        methods: {
            changeMessage: function() {
                this.message = 'I Get it';
            }
        },
        //组件创建之前
        beforeCreate(){
            console.warn('beforeCreate');
        },
        //组件创建完毕
        created(){
            console.warn('created');
        },
        // 组件挂载之前
        beforeMount(){
            console.warn('beforeMount');
        },
        // 组件挂载完毕
        mounted(){
            console.warn('mounted');
        },
        // 组件更新之前
        beforeUpdate(){
            console.warn('beforeUpdate');
        },
        // 组件更新完毕
        updated(){
            console.warn('updated');
        },
        // 组件销毁之前
        beforeDestroy(){
            console.warn('beforeDestroy');
        },
        // 组件销毁完毕
        destroyed(){
            console.warn('destroyed');
        }
    })
</script>
</body>
</html>